<template>
    <div class="watch" v-if="is_show">

        <div id="watch" :class="watch_class">

            <!--S标题-->
            <h2>
                <span>表单数据</span>
                <i
                        class="close iconfont icon-guanbi"
                        @click="$emit('close')"
                >
                </i>
            </h2>
            <!--E标题-->

            <!--S数据内容-->
            <div id="content">
                <cube-scroll ref="scroll">
                    <dl v-for="(item,index) in data" :key="index">
                        <dt>{{item.label}}</dt>
                        <dd>{{item.value}}</dd>
                    </dl>
                </cube-scroll>
            </div>
            <!--E数据内容-->

        </div>
    </div>
</template>

<script>
export default {
    name: "watch",
    data() {
        return {
            // id 编辑区域class，控制打开关闭的动画
            watch_class: "close"
        }
    },
    props: {
        // 是否显示
        is_show: {
            type: Boolean,
            default: false
        },
        data: {
            type: Array
        }
    },
    watch: {
        "is_show" () {
            this.toggle()
        }
    },
    methods: {
        /**
         * 显示隐藏区域
         */
        toggle() {
            if (this.is_show) {
                setTimeout(() => {
                    this.watch_class = 'open'
                }, 100)
            } else {
                this.watch_class = 'close'
            }
        }
    }
}
</script>

<style scoped lang="less" src="./watch.less"></style>